Canvas Mouse Events in Python



In [1]:

    
from __future__ import print_function, unicode_literals, division, absolute_import

from widget_canvas import CanvasImage
from widget_canvas.image import read

import IPython
from ipywidgets import widgets

Load some data



In [2]:

    
image_A = read('images/Whippet.jpg')
image_B = read('images/Doberman.jpg')

Simple Example



In [3]:

    
# Build and display the widget.
wid = CanvasImage(image_A)

wid.display()

# Build an event handler function.
def simple_handler(wid, info):
    print(info)
    
# Attach the handler to the widget's on_click events.
wid.on_mouse_click(simple_handler)









    



{'canvasY': 103, 'ctrlKey': False, 'canvasX': 248, 'buttons': 0, 'type': 'click', 'timeStamp': 1454193754878, 'altKey': False, 'shiftKey': False}
{'canvasY': 103, 'ctrlKey': False, 'canvasX': 248, 'buttons': 0, 'type': 'click', 'timeStamp': 1454193755748, 'altKey': False, 'shiftKey': False}
{'canvasY': 112, 'ctrlKey': False, 'canvasX': 270, 'buttons': 0, 'type': 'click', 'timeStamp': 1454193757197, 'altKey': False, 'shiftKey': False}
{'canvasY': 112, 'ctrlKey': False, 'canvasX': 270, 'buttons': 0, 'type': 'click', 'timeStamp': 1454193781630, 'altKey': False, 'shiftKey': False}
{'canvasY': 112, 'ctrlKey': False, 'canvasX': 270, 'buttons': 0, 'type': 'click', 'timeStamp': 1454193782030, 'altKey': False, 'shiftKey': False}

Try it out!

Move the mouse over the image and click anywhere. Notice the generated event information displayed to the cell's output area.

More Complicated Example



In [ ]:

    
# Build image widget
wid_image = CanvasImage(image_A)

# Make pretty borders
wid_image.border_color = 'black'
wid_image.border_width = 1

# Build info display widgets
wid_t = widgets.Text(description='Event', width=120)
wid_xy = widgets.Text(description='X, Y', width=100)
wid_m = widgets.IntText(description='Moves')
wid_c = widgets.IntText(description='Clicks')
wid_wx = widgets.IntText(description='Wheel X')
wid_wy = widgets.IntText(description='Wheel Y')
wid_b = widgets.IntText(description='Buttons')
wid_k = widgets.Text(description='Key')

# Assemble the info widgets into a vertical column.
wid_info = widgets.VBox((wid_t, wid_xy, wid_m, wid_c, wid_wx, wid_wy, wid_b, wid_k))

# Adjust the fonts
for w in wid_info.children:
    w.font_family = 'monospace'
    w.font_size = 14
    
# Assemble image widget and grouped info widgets.
wid_compound = widgets.HBox((wid_image, wid_info))



In [ ]:

    
# Define event handlers
def handle_all(wid, info):
    wid_t.value = info['type']
    wid_b.value = info['buttons']

    xy = '{:3d}, {:3d}'.format(info['canvasX'], info['canvasY'])
    wid_xy.value = xy
    
    keys = ['ctrlKey', 'shiftKey', 'altKey']

    text = [k for k in keys if info[k]]
    
    wid_k.value = ', '.join(text)
                
def handle_move(wid, info):
    wid_m.value += 1

def handle_up(wid, info):
    wid_image.data = image_A

def handle_down(wid, info):
    wid_image.data = image_B    
    
def handle_click(wid, info):
    wid_c.value += 1

def handle_wheel(wid, info):
    wid_wx.value += info['deltaX']
    wid_wy.value += info['deltaY']

# Attach event handlers to canvas widget
wid_image.on_mouse(handle_all)
wid_image.on_mouse_move(handle_move)
wid_image.on_mouse_up(handle_up)
wid_image.on_mouse_down(handle_down)
wid_image.on_mouse_click(handle_click)
wid_image.on_mouse_wheel(handle_wheel)



In [ ]:

    
# Display the compound widget.
wid_image.smoothing = False
wid_compound

Try it out!

Move the mouse over the image and notice the real-time display update with event information. The key field indicates which, if any, of ctrl, shift, or alt were depressed during the event.



In [ ]: